import React from 'react';
import { Table, Pagination, Spin, Button } from 'antd';
import { observer } from 'mobx-react';
import { WeaTextarea, WeaInput, WeaDialog } from 'ecCom';
import Templet2Store from '../../../stores/apiStore/Templet2Store';

import { WeaInputLocale, WeaLocaleProvider } from 'ecCom';

const getCurrentLabel = WeaInputLocale.getCurrentLabel;// 过滤多语言字符串
const getLabel = WeaLocaleProvider.getLabel;// 获取多语言

/**
 * 根据企业全名或注册号或统一社会信用代码获取企业受益人,需要二次请求
 */
@observer
export default class Templet2 extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      store: new Templet2Store(),
      visible: false,
    };
  }
  componentWillMount() {
    const { store } = this.state;
    // console.log(this.props)
    const { init } = store;
    init(this.props);
  }

  render() {
    const { isSuccess, apiId, apiName, updata_date } = this.state.store;
    const { columnName, visible, paths } = this.state;
    return (
      <div style={{ height: '100%', overflow: 'scroll', padding: '10px' }}>
        <div id={apiId} className="section-big-title">
          <strong>{apiName}</strong>
        </div>
        <div className="group_show_single_time">{isSuccess && `${getLabel(510770, '更新时间：') + updata_date})`}
        </div>
        {this.getContainer(this.props.ecId || '')}
        <WeaDialog
          ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@4ansz5`}
          title={columnName}
          style={{ width: '80%', height: 1500 }}
          visible={visible}
          onCancel={
            () => this.setState({ visible: false })
          }
          icon="icon-coms-crm"
          iconBgcolor="#96358a"
        >
          {paths}
        </WeaDialog>
      </div >
    );
  }
  getSubTable(columnName, items = []) {
    // console.log(columnName)
    // console.log(items)
    this.setState({ columnName });
    this.setState({ visible: true });
    const paths = [];
    items.map((item) => {
      paths.push(<div style={{ margin: '10px' }}>{item}</div>);
    });
    this.setState({ paths });
  }
    getContainer = (ecId) => {
      const { loading, isSuccess, msgcode, json, showSpin, apiId, apiName } = this.state.store;
      const columns = [
        {
          dataIndex: 'enterprise',
          isHtml: true,
          key: 'enterprise',
          sortDirections: ['descend', 'ascend'],
          title: getCurrentLabel('企业名称'),
        },
        {
          dataIndex: 'beneficiary',
          isHtml: true,
          key: 'beneficiary',
          sortDirections: ['descend', 'ascend'],
          title: getCurrentLabel('受益人'),
        },
        {
          dataIndex: 'type',
          isHtml: true,
          key: 'type',
          sortDirections: ['descend', 'ascend'],
          title: getCurrentLabel('受益所有人类型'),
        },
        {
          dataIndex: 'title',
          isHtml: true,
          key: 'title',
          sortDirections: ['descend', 'ascend'],
          title: getCurrentLabel('任职'),
        },
        {
          dataIndex: 'percent',
          isHtml: true,
          key: 'percent',
          sortDirections: ['descend', 'ascend'],
          title: getCurrentLabel('股权占比'),
        },
        {
          dataIndex: 'reason',
          isHtml: true,
          key: 'reason',
          sortDirections: ['descend', 'ascend'],
          title: getCurrentLabel('受益人说明'),
        },
        {
          dataIndex: 'law_desc',
          isHtml: true,
          key: 'law_desc',
          sortDirections: ['descend', 'ascend'],
          title: getCurrentLabel('条文依据'),
        },
        {
          dataIndex: 'paths',
          isHtml: true,
          key: 'paths',
          sortDirections: ['descend', 'ascend'],
          title: getCurrentLabel('投资路径'),
          render: (text, record) =>
            (<Button
              ecId={`${ecId}_Button@yvcfvo@search`}
              type="primary"
              shape="circle"
              icon="search"
              onClick={
                () => {
                  this.getSubTable(`${record.beneficiary}的投资路径`, record.paths);
                }
              }
            />),
        },

      ];
      if (!loading) {
        if (isSuccess) {
          const { data, message, sign, status } = json;
          const { total, num, items } = data;
          return (
            <Table ecId={`${this && this.props && this.props.ecId || ''}_Table@2y0jt4`} columns={columns} dataSource={items} pagination={false} scroll={{ x: '100%' }} />
          );
        }
        return <div>{msgcode}</div>;
      }
      return (
        showSpin
          ?
          <div className="crm-api-span"><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@79hg3i`} spinning={loading} size="large" tip={getLabel(384470, '正在读取数据...')} /> </div>
          :
            <div>
            <div id={apiId} className="section-big-title"><strong>{apiName}</strong> </div>
            <div>{getLabel(384470, '正在读取数据...')}</div>
          </div>
      );
    }
}
